html {
    margin: 0;
    padding: 0;
    -webkit-text-size-adjust: 100%;
}

body {
    height: 100%;
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Open Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    line-height: 1.5;
    background: #EDEDED;
    color: #24292e;
    -webkit-font-smoothing: subpixel-antialiased;
    word-wrap: break-word;
    -ms-word-wrap: break-word;
}

h1 {
    font-size: 1.75em;
    line-height: 1.357;
    font-weight: 700;
}

h2 {
    font-size: 1.6em;
    line-height: 1.333;
    font-weight: 700;
}

h3 {
    font-size: 1.4em;
    line-height: 1.333;
    font-weight: 700;
}

h4 {
    font-size: 1.2em;
    line-height: 1.333;
    font-weight: 700;
}

pre {
    white-space: pre;
    word-wrap: normal;
    -ms-word-wrap: normal;
    position: relative;
    font-size: 0.8125em;
    line-height: 1.45;
    margin: 1em 0;
    tab-size: 4;
    -moz-tab-size: 4;
    -o-tab-size: 4;

    .copy-btn {
        background: #fff;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
        border-color: #333;
        opacity: 1 !important;
        display: none;
    }

    &:hover .copy-btn {
        display: block;
    }

    code {
        border-radius: 0;
    }
}


code {
    margin: 0;
    padding: 0.28em 0.4em 0.2em;
    color: #c7254e;
    background: #f9f2f4;
    font-size: 0.9063em;
    border-radius: 3px;
}

h1, h2, h3, h4, pre {
    code {
        font-size: inherit;
    }
}

::-webkit-input-placeholder {
    color: #999;
}

.layui-btn-primary:hover {
    border-color: #333;
}

.layui-laypage-page {
    a:hover {
        color: #000;
    }

    .layui-laypage-curr .layui-laypage-em {
        background-color: #666;
    }
}

.site-header {
    background: #333;
    color: #fff;
    padding: 36px 0 5.25em;

    a {
        color: #fff;
    }

    .title-container {
        position: relative;
        margin-bottom: 2.25em;

        p {
            display: inline-block;
            color: #D4D4D4;
            font-size: 0.875em;
            line-height: 1.715;
            margin-left: 6px;
        }

        .site-title {
            display: inline-block;

            a {
                font-weight: 700;
                font-size: 1.8em;
                line-height: 1.333;
            }
        }
    }

    .toggle-navigation {
        background: url(../img/menu.png) no-repeat;
        width: 30px;
        height: 20px;
        display: none;
    }

    .menu-container {
        margin-bottom: 1.875em;

        ul {
            font-size: 1em;
            font-weight: 400;

            li {
                display: inline-block;
                margin: 0 10px 0 0;

                &.current a {
                    background: #000;
                }

                a {
                    position: relative;
                    font-size: 0.875em;
                    display: inline-block;
                    vertical-align: middle;
                    z-index: 9;
                    overflow: hidden;
                    padding: 2px 8px;
                    -webkit-transition: all 0.2s;
                    transition: all 0.2s;
                    -webkit-backface-visibility: hidden;
                    backface-visibility: hidden;

                    &:hover {
                        color: #333;
                        background: #fff;
                    }
                }
            }
        }
    }
}

.site-body {
    margin-top: -100px;
}

.search-header {
    margin-bottom: 0.75em;
    color: #fff;

    h1 {
        display: inline-block;
        font-weight: 300;
        background: #242424;
        padding: 6px 14px 6px 14px;
        font-size: 0.875em;
        line-height: 1.715;
        box-shadow: 0 0 2px 0 rgba(150, 150, 150, 0.2);
    }
}

.post {
    background: #fff;
    margin-bottom: 1.5em;
    box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
    position: relative;

    .post-container {
        padding: 1.875em 7.50006% 2.25em;

        .post-title {
            font-size: 1.75em;
            line-height: 1.357;
        }

        .post-byline, .further-reading {
            font-size: 0.75em;
            line-height: 1.5;
        }

        .post-byline .date {
            font-weight: 700;
            text-decoration: underline;
        }

        .post-content {
            p {
                margin: 1.5em 0;
            }

            a {
                font-weight: 500;
                text-decoration: underline;
            }

            img {
                height: auto !important;
                max-width: 100%;
                border-color: #ccc;
            }

            blockquote {
                margin: 1.5em 0;
                padding: 0.5em 1em;
                border-left: solid 8px #ccc;
                background: #f5f5f5;

                p:first-child {
                    margin-top: 0.5em;
                }

                p:last-child {
                    margin-bottom: 0.5em;
                }
            }

            h1, h2, h3, h4 {
                margin: 1.5em 0;
            }

            h2 {
                margin-bottom: 1.2em;
                padding-bottom: 0.3em;
                border-bottom: 1px solid #e6e6e6;
            }

            .copyright {
                font-size: 0.8em;
                margin-top: 1.5em;
            }

            ul, ol {
                padding: 0;
                margin: 1.5em;

                ul, ol {
                    margin: 0 1.2em;
                }

                li {
                    list-style: inherit;
                }
            }

            table {
                border-collapse: collapse;
                border-spacing: 0;
                border-color: #c0c0c0;
                border-style: solid;
                word-break: break-word;

                th, td {
                    border-color: #c0c0c0;
                    padding: 3px 10px;
                }
            }

            .related-posts {
                h3 {
                    line-height: 2.5em;
                    margin: 0;
                }

                ul {
                    margin-top: 0;

                    li {
                        padding-bottom: 10px;
                    }
                }
            }
        }

        .post-categories, .comment-link {
            display: inline;
            font-size: 0.875em;
            line-height: 1.715;

            a {
                font-weight: 700;
                text-decoration: none;
            }
        }

        .post-meta {
            margin: 1.875em 0 0.75em;

            .post-categories {
                display: block;
                margin-bottom: 1.71em;
            }

            .post-tags {
                margin-bottom: 1.125em;

                ul {
                    margin: 0;

                    li {
                        list-style: none;
                        display: inline-block;

                        a {
                            display: inline-block;
                            padding: 0 12px;
                            border: solid 1px #333;
                            margin: 0 2px 6px 0;
                            font-size: 0.875em;
                            -webkit-transition: all 0.2s;
                            transition: all 0.2s;

                            &:hover {
                                color: #fff;
                                background: #333;
                            }
                        }
                    }
                }
            }

            .further-reading {
                a {
                    display: block;
                    font-weight: 700;
                    font-size: 1.15em;
                    line-height: 1.715;
                }

                div {
                    width: 50%;
                    display: inline-block;
                    vertical-align: top;
                    margin-right: -4px;
                }

                .next {
                    text-align: right;
                }
            }
        }
    }
}

.layui-col-md8, .layui-col-md12 {
    transition: width 0.3s ease-in-out;
}

.pagination {
    background: #fff;
    box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
    padding: 1.3em 7.50006% 1em;
    text-align: center;
}

.comment-container {
    padding-bottom: 15px;
    margin-top: -8px;

    .comment-number {
        background: #fff;
        box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
        padding: 1.5em 7.50006%;
        margin-bottom: 15px;

        h2 {
            font-size: 1.125em;
            line-height: 1.5;
        }
    }

    .comment-list {
        .pingback {
            position: relative;
            margin-bottom: 15px;

            .comment {
                padding-top: 2.25em;
                background: #fff;
                box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
                padding: 1.5em 7.50006%;

                .comment-author {
                    .avatar {
                        border-radius: 50%;
                        width: 48px;
                        height: 48px;
                        float: left;
                        margin-right: 0.75em;
                    }

                    .author-name {
                        display: block;

                        a {
                            font-size: 0.875em;
                            line-height: 1.715;
                            font-weight: 700;
                        }
                    }

                    .comment-date {
                        font-size: 0.75em;
                        line-height: 1.5;
                        display: block;
                    }
                }

                .comment-content {
                    margin: 1.5em 0;

                    p {
                        font-size: 0.875em;
                        margin: 0.875em 0;
                    }

                    .master-reply {
                        padding: 1px 18px;
                        background: #EDEDED;

                        .master-meta {
                            font-weight: 700;
                        }
                    }
                }

                .comment-footer {
                    position: absolute;
                    top: 1.5em;
                    right: 4.6875375%;

                    a {
                        font-weight: 700;
                        margin-left: 4px;
                        vertical-align: text-top;
                        font-size: 0.75em;
                        line-height: 1.5;
                    }
                }
            }
        }
    }

    .comment-respond {
        background: #fff;
        box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
        padding: 1.5em 7.50006%;
        padding-top: 2.25em;

        p {
            margin: 1.125em 0;

            &.comment-notes {
                margin: 1.5em 0;
            }

            label {
                display: block;
                margin-bottom: 6px;
                font-weight: 700;
                font-size: 0.875em;
                line-height: 1.715;
            }

            textarea, input {
                font-size: 0.875em;
                background: #F7F7F7;

                &:focus {
                    background: #fff;
                }
            }

            textarea {
                width: 85%;
            }

            input {
                width: 55%;
            }

            &.comment-form-avatar span {
                display: block;

                label {
                    position: relative;
                    display: inline-block;
                    width: 48px;
                    height: 48px;
                    margin: 8px;

                    input {
                        display: none;

                    }

                    i {
                        display: none;
                    }

                    &.checked i {
                        display: block;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        z-index: 999;
                        font-size: 1em;
                        line-height: 100%;
                        color: #fff;
                        background: #5FB878;
                        border: 3px solid #5FB878;
                        border-radius: 50%;
                    }

                    img {
                        border-radius: 50%;
                        width: 48px;
                    }
                }
            }

            &.comment-form-btn {
                margin: 2em 0 1.5em;
            }
        }
    }
}

.widget {
    background: #fff;
    margin-bottom: 15px;
    box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
    padding: 1.875em 7.50006%;
    font-size: 0.875em;
    line-height: 1.715;

    .widget-title {
        font-size: 1.15em;
        line-height: 1.5;
        margin-bottom: 1.5em;
    }

    ul {
        padding: 0;
        margin: 1.5em;

        li {
            list-style: disc;
        }
    }

    &.widget-profile {
        margin-top: 3.4em;
        padding-top: 1em;
        padding-bottom: 1em;

        .profile {
            overflow: auto;

            .profile-picture {
                float: left;
                width: 55px;
                margin-top: 0.4em;
            }

            .profile-intro {
                float: right;
                width: ~"calc(100% - 60px) !important";
                font-size: 0.875em;
                line-height: 1.5;
                height: 61px;

                .name {
                    font-weight: 500;
                    font-size: 1.2em;
                }

                .intro {
                    height: 3em;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }

    &.widget-search {
        input {
            display: inline-block;
            width: ~"calc(100% - 80px) !important";
            background: #F7F7F7;
            padding-right: 8px;

            &:focus {
                background: #fff;
            }
        }

        button {
            display: inline-block;
            width: 75px;
            margin-top: -3px;
        }
    }

    &.widget-categories a:hover {
        text-decoration: underline;
    }
}


.site-footer {
    background: #333;
    margin-top: 2em;
    color: #D4D4D4;

    .footer-content {
        text-align: center;
        color: #D4D4D4;
        font-size: 0.75em;
        line-height: 150%;

        a {
            color: #fff;

            &:hover {
                color: #D4D4D4;
            }
        }
    }
}

@media screen and (max-width: 991px) {
    h1 {
        font-size: 1.65em;
    }

    .site-header {
        min-height: 120px;

        .title-container p {
            display: block;
            margin-left: 0;
        }

        .toggle-navigation {
            display: block;
            position: absolute;
            top: 5px;
            right: 20px;
            z-index: 9;

            i {
                font-size: 1.5em;
                font-weight: 700;
                color: #fff;
            }
        }

        .menu-container {
            display: none;
            margin-bottom: 4em;

            ul li {
                display: block;
                text-align: center;
                margin-bottom: 6px;
            }
        }
    }

    .view-header {
        padding-bottom: 1px;
        min-height: 100px;
    }

    .site-body {
        margin-top: -30px;
    }

    .search-header h1 {
        display: block;
    }

    .post {
        margin-bottom: 15px;

        .post-container .post-title {
            font-size: 1.65em;
        }
    }

    .pagination {
        margin-bottom: 15px;
    }

    .comment-container {
        margin-top: 0;

        .comment-number h2 {
            font-size: 1em;
            line-height: 1.5;
        }

        .comment-respond {
            p {
                textarea, input {
                    width: 100%;
                }
            }
        }
    }

    aside {
        position: static !important;
        padding-top: 0 !important;
        margin-top: -15px;
        display: block !important;
    }

    .widget.widget-profile {
        position: absolute;
        top: -6.4em;
        left: 0;
        right: 0;
        margin: 0 15px;
        z-index: 9;
    }

    .post .post-container,
    .pagination,
    .comment-container .comment-number,
    .comment-container .comment-list .pingback .comment,
    .comment-container .comment-respond,
    .widget {
        padding-left: 6%;
        padding-right: 6%;
    }

}

@media screen and (max-width: 767px) {
    h1 {
        font-size: 1.55em;
    }

    h2 {
        font-size: 1.45em;
        line-height: 1.5;
    }

    h3 {
        font-size: 1.3em;
        line-height: 1.5;
    }

    h4 {
        font-size: 1.15em;
        line-height: 1.5;
    }

    .post .post-container {
        .post-title {
            font-size: 1.55em;
        }

        .post-meta .further-reading div {
            display: block;
            width: auto;

            &.previous {
                margin-bottom: 1em;
            }

            &.next {
                text-align: left;
            }
        }
    }
}

@media screen and (min-width: 1360px) {
    .layui-container {
        width: 1300px;
    }
}

/* 代码高亮行号样式 */
.hljsln {
    display: block;
    margin-left: 2.4em;
    padding-left: 0.7em !important;

    &::-webkit-scrollbar {
        height: 15px;
    }

    &::-webkit-scrollbar-thumb {
        background: #666;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #797979;
    }

    &::-webkit-scrollbar-thumb:active {
        background: #949494;
    }

    .ln-bg {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 2.4em;
        height: 100%;
        background: #333;
    }

    .ln-num {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        position: absolute;
        z-index: 2;
        left: 0;
        width: 2.4em;
        height: 1em;
        text-align: center;
        display: inline-block;

        &::before {
            color: #777;
            font-style: normal;
            font-weight: normal;
            content: attr(data-num);
        }
    }

    .ln-eof {
        display: inline-block;
    }
}
